<template>
  <div class="comp">
    <div class="main">
      <div class="header">
        <div class="row">
          <span class="title">公司城市：</span>
          <span class="content">
            <span  @click='onSelect1' :class='`${city == "" ? "selectd": null }`' data-key="" >不限</span>
            <span  @click='onSelect1' :class='`${city == p ? "selectd": null }`' v-for="(p,i) of cityList " :data-key='p' :key='i'>{{p}}</span>
          </span>
        </div>
        <div class="row">
          <span class="title">行业类型：</span>
          <span class="content">
            <span  @click='onSelect2' :class='`${compType == "" ? "selectd": null }`' data-key="" >不限</span>
            <span  @click='onSelect2' :class='`${compType == p.value ? "selectd": null }`' v-for="(p,i) of COMPTYPE " :data-key='p.value' :key='i'>{{p.label}}</span>
          </span>
        </div>
        <div class="row">
          <span class="title">公司规模：</span>
          <span class="content">
             <span  @click='onSelect3' :class='`${peopleNum == "" ? "selectd": null }`' data-key="" >不限</span>
            <span  @click='onSelect3' :class='`${peopleNum == p.value ? "selectd": null }`' v-for="(p,i) of COMPPEOPLE " :data-key='p.value' :key='i'>{{p.label}}</span>
          </span>
        </div>
      </div>
      <div class="footer">
        <div class="hotComp">
          <div class="CompCard" @click="toCompDetail(p.id)" v-for="(p,i) of comps" :key="i">
            <div class="img">
              <img :src="p.logo" alt="">
            </div>
            <div class="right">
              <h3>{{p.compName}}</h3>
              <div class="footer">
                <div>{{COMPPEOPLEMAP[p.peopleNum]}}</div>&nbsp;&nbsp;|&nbsp;&nbsp;
                <div>{{COMPTYPEMAP[p.compType]}}</div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import './styles.less'
import compAPI from '../../services/comp'
import { requestWrapper } from '../../utils/request'
import {COMPTYPEMAP, COMPPEOPLEMAP, COMPTYPE, COMPPEOPLE} from '../../const/const'
export default {
  data() {
    return {
      cityList: [],
      city: '',
      compType: '',
      peopleNum: '',
      comps: [],
      COMPTYPEMAP: COMPTYPEMAP,
      COMPPEOPLEMAP: COMPPEOPLEMAP,
      COMPTYPE: COMPTYPE,
      COMPPEOPLE: COMPPEOPLE
    };
  },
  methods: {
    onSelect1(e) {
      this.city = e.target.dataset.key;
      this.searchComp()
    },
    onSelect2(e) {
      this.compType = e.target.dataset.key;
      this.searchComp()
    },
    onSelect3(e) {
      this.peopleNum = e.target.dataset.key;
      this.searchComp()
    },
    searchComp() {
      requestWrapper( compAPI.comps.bind(null, {pageSize: 12, compType: this.compType, peopleNum: this.peopleNum, city: this.city}), {
        formatDataFn: res => res.result.list,
      }).then((res) => {
        this.comps = res
      })
    },
    toCompDetail(id) {
      const compDetail = this.$router.resolve({
        path: '/comp_detail',
        query: {
          compId: id
        }
      })
      window.open(compDetail.href,'_blank')
    }
  },
  mounted() {
    this.searchComp();
    requestWrapper( compAPI.compCity.bind(null, {}), {
        formatDataFn: res => res,
      }).then((res) => {
        this.cityList = res.result
      })
  }

}
</script>
